<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-select v-model="filters.status" placeholder="请选择状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item prop="name">
          <el-input v-model="filters.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            :label="$t('action.reset')"
            type="primary"
            @click="resetForm('filters')"
          />
        </el-form-item>
        <el-form-item>
          <kt-button label="新增" type="primary" @click="handleAdd" />
          <kt-button label="使用存档" type="primary" @click="handleTem" />
        </el-form-item>
      </el-form>
    </div>
    <div
      class="toolbar"
      style="float:right;padding-top:10px;padding-right:15px;"
    >
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button
                icon="fa fa-refresh"
                @click="findPage(null)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button
                icon="fa fa-filter"
                @click="displayFilterColumnsDialog"
              ></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :highlightCurrentRow="true"
      :content="pageResult"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showSelection="false"
      :showBatchDelete="false"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      ref="CyTable"
    >
    </cy-table>

    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="120px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input
            v-model="dataForm.id"
            :="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
        <el-input v-model="dataForm.name" auto-complete="off" style="width: 215px"></el-input>
      </el-form-item>
        <el-form-item label="营销对象类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择状态">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动分组" prop="group">
          <el-select v-model="dataForm.group" placeholder="请选择状态">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="startTime">
          <el-date-picker
            v-model="dataForm.startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束时间" prop="endTime">
          <el-date-picker
            v-model="dataForm.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审批人" prop="approver">
          <el-select v-model="dataForm.approver" placeholder="请选择状态">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">{{
          $t("action.cancel")
          }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="80%"
      :visible.sync="dialogEditVisible"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="活动基本信息" name="first">
          <el-form
            :model="dataFormEdit"
            label-width="100px"
            ref="dataFormEdit"
            :size="size"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动名称">
                  <el-input v-model="dataFormEdit.test1"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动ID">
                  <el-input v-model="dataFormEdit.test2"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动分组" >
                  <el-input v-model="dataFormEdit.test3"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营销对象类型">
                  <el-input v-model="dataFormEdit.test4"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="运行时间" >
                  <el-input v-model="dataFormEdit.test5"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动状态" >
                  <el-input v-model="dataFormEdit.test6"   auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="备注" >
                  <el-input v-model="dataFormEdit.test7"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <hr>
            <span>创建信息</span>
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建人">
                  <el-input v-model="dataFormEdit.test8"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input v-model="dataFormEdit.test9"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动所属组织">
                  <el-input v-model="dataFormEdit.test10"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <hr>
            <span>审批信息</span>
            <el-row>
              <el-col :span="12">
                <el-form-item label="审批人">
                  <el-input v-model="dataFormEdit.test11"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批时间">
                  <el-input v-model="dataFormEdit.test12"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="审批结果">
                  <el-input v-model="dataFormEdit.test13"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审批备注">
                  <el-input v-model="dataFormEdit.test14"  auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="设置活动流程" name="second">   <el-form
          :model="dataFormEdit"
          label-width="100px"
          ref="dataFormEdit2"
          :size="size"
        >
          <span>触发时机</span>
          <el-row>
            <el-form-item label="触发时机选择">
              <el-input v-model="dataFormEdit2.test1"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="过滤条件">
              <el-input v-model="dataFormEdit2.test2"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="时机控制" >
              <el-radio v-model="dataFormEdit2.test3" label="1">启用</el-radio>
              <el-radio v-model="dataFormEdit2.test3" label="2">禁用</el-radio>
            </el-form-item>
          </el-row>
          <hr>
          <span>目标客群</span>
          <el-row>
            <el-form-item label="营销对象类型" >
              <el-input v-model="dataFormEdit2.test5"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="删选条件" >
              <el-button type="primary">添加条件</el-button>
            </el-form-item>
          </el-row>
          <hr>
          <span>营销动作</span>
          <el-row>
            <el-form-item label="动作类型">
              <el-input v-model="dataFormEdit2.test8"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="卡券项目">
              <el-input v-model="dataFormEdit2.test9"  auto-complete="off" style="width: 1300px"></el-input> <el-button type="primary">预览</el-button>
            </el-form-item>
            <el-form-item label="触发身份标识">
              <el-input v-model="dataFormEdit2.test10"  auto-complete="off"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="third"> <el-table
          :data="tableData"
        >
          <el-table-column
            prop="test1"
            label="操作时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="test2"
            label="操作类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="test3"
            label="操作人">
          </el-table-column>
          <el-table-column
            prop="test4"
            label="备注">
          </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="活动报告" name="fourth"> <el-main>
          <div style="width:100%;height:450px;border-color:red;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
            <div class="toolbar" id="lineChart"
                 style="float:left;padding-top:20px;padding-left:20px;width:1000px;height:400px">
            </div>
          </div>
        </el-main></el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogEditVisible = false">{{
          $t("action.cancel")
          }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormEdit"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>

    <!--使用存档-->
    <el-dialog
      title="使用存档"
      width="60%"
      :visible.sync="dialogTemVisible"
      :close-on-click-modal="false"
    >
      <el-table
        :data="tableData1"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="test1"
          label="模板Id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="test2"
          label="模板名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="test3"
          label="创建时间">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogTemVisible = false">{{
          $t("action.cancel")
          }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormTem"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import utils from "@/assets/js/utils.js";
  export default {

    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        tableData1:[{test1:"10001",test2:"测试事件活动",test3:"2020-03-26",test4:"测试数据"},{test1:"10001",test2:"测试事件活动",test3:"2020-03-24",test4:"测试数据"}],
        mylineLegend: ['活动报告'],
        mylineseriesdatas:[{name:'昨天',data:[175,70,28,26,9,5,2]}],
        mylineXAxisData: ["2019-12-24", "2019-12-25", "2019-12-26", "2019-12-27", "2019-12-28", "2019-12-29", "2019-12-30"],
        tableData:[{test1:"2019-12-24",test2:"终止",test3:"张三",test4:"测试数据"},{test1:"2019-12-24",test2:"审核通过",test3:"李四",test4:"测试数据"}],
        dataFormEdit2:{
          test1:"Vip8",
          test2:"Vip以下会员",
          test3:"1",
          test4:"类型一",
          test5:"添加条件",
          test6:"发放优惠卷",
          test7:"",
          test8:"动作类型一",
          test9:"测试卡卷项目",
          test10:"Vip",
        },
        dataFormEdit:{
          test1:"测试活动名称1",
          test2:"1066668",
          test3:"测试分组1",
          test4:"类型1",
          test5:"2019-12-25",
          test6:"审核通过",
          test7:"这是活动备注",
          test8:"张三",
          test9:"2020-03-25 19:47:29",
          test10:"APEC",
          test11:"李四",
          test12:"2020-03-25 19:47:29",
          test13:"审核通过",
          test14:"这是审批备注",
        },
        activeName:"first",
        dialogEditVisible:false,
        options3: [{
          value: '1',
          label: '张三'
        }, {
          value: '2',
          label: '李四'
        }, {
          value: '3',
          label: '王二'
        }],
        options2: [{
          value: '1',
          label: '分组1'
        }, {
          value: '2',
          label: '分组2'
        }, {
          value: '3',
          label: '分组3'
        }],
        options1: [{
          value: '1',
          label: '类型1'
        }, {
          value: '2',
          label: '类型2'
        }, {
          value: '3',
          label: '类型3'
        }],
        size: "small",
        filters: {
          code: "",
          name: ""
        },
        options: [{
          value: '1',
          label: '审核通过'
        }, {
          value: '2',
          label: '审核拒绝'
        }, {
          value: '3',
          label: '待审核'
        }],
        size: "small",
        filters: {
          code: "",
          name: ""
        },
        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: [],
        totalSize: 0,
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
          approver: [{ required: true, message: "请选择审批人", trigger: "change" }],
          endTime: [{ required: true, message: "请输入结束时间", trigger: "blur" }],
          startTime: [{ required: true, message: "请输入开始时间", trigger: "blur" }],
          group: [{ required: true, message: "请选择分组", trigger: "change" }],
          type: [{ required: true, message: "请选择类型", trigger: "change" }],
          name: [{ required: true, message: "请输入单位名称", trigger: "blur" }]
        },
        // 新增编辑界面数据
        dataForm: {
          approver: "",
          name: "",
          endTime:"",
          startTime:"",
          group:"",
          type:""
        },
        selectionsTem:[],
        dialogTemVisible:false
      };
    },

    methods: {
      submitFormTem:function(){
        if(this.selectionsTem.length==0){
          this.$message({ message: "请选择要操作的数据", type: "error" });
        }else{
          this.$message({ message: "操作成功", type: "success" });
          this.dialogTemVisible=false
        }
      },
      handleSelectionChange:function(params){
        this.selectionsTem=params
      },

      handleTem:function(){
        this.selectionsTem=[]
        this.dialogTemVisible=true
      },
      submitFormEdit:function(){
        this.dialogEditVisible=false
        this.$message({ message: "操作成功", type: "success" });
      },
      handleClick:function(param){
        if(param="forth"){
          this.$mychart.myLineChartMutSmooth('lineChart',this.mylineLegend,this.mylineXAxisData, this.mylineseriesdatas, "活动报告");
        }
      },
      handleDelete:function(){},
      // 获取分页数据
      findPage: function(params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.queryProductUnits(this_.filters, function(res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.pageResult = [{
            id: "100068",
            startTime: "2020-03-28 19:47:29",
            endTime: "2020-03-23 19:47:29",
            name: "测试活动",
            creatorName: "贺同学",
            reamark:"这是测试模板",
            type:"类型1",
            approver:"李四 ",
            status:"审核拒绝"
          },{
            id: "100069",
            startTime: "2020-03-24 19:47:29",
            endTime: "2020-03-25 19:47:29",
            name: "测试活动1",
            creatorName: "王老板",
            reamark:"这是测试模板2",
            type:"类型2",
            approver:"张三",
            status:"审核通过"
          }];
          this_.totalSize = 2;
        });
      },
      // 显示新增界面
      handleAdd: function() {
        this.dataForm={
          approver: "",
          name: "",
          endTime:"",
          startTime:"",
          group:"",
          type:""
        }
        this.dialogVisible = true;
        this.operation = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });

      },
      // 显示编辑界面
      // 显示编辑界面
      handleEdit: function(params) {
        this.dialogEditVisible = true;

      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function() {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function(data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function() {
        this.columns = [
          { prop: "id", label: "活动ID", minWidth: 120 },
          { prop: "name", label: "活动名称", minWidth: 120 },
          { prop: "startTime", label: "活动开始时间", minWidth: 120 },
          { prop: "endTime", label: "结束时间", minWidth: 120 },
          { prop: "type", label: "营销对象类型", minWidth: 120 },
          { prop: "creatorName", label: "创建人", minWidth: 120 },
          { prop: "approver", label: "审批人", minWidth: 120 },
          { prop: "status", label: "活动状态", minWidth: 120 }
        ];
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.findPage();
      },
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.$message({ message: "操作成功", type: "success" });
              this.dialogVisible = false;
            });
          }
        });
      },

    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner   {
    width: 200px !important;
  }
</style>
